<style lang="scss">
.cus-dialog__content {
  width: 100%;
  margin: 0 auto;

  .cus-dialog__header {
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
  }

  .cus-dialog__cont {
    width: 100%;
    height: 600px;
    max-height: 600px;
    overflow-y: auto;
  }
}
</style>
<template>
  <div class="cus-dialog__content">
    <div class="cus-dialog__header">
      <h3>设备详情</h3>
      <p>
        数据最后更新时间
        <span>{{ timeNow }}</span>
      </p>
    </div>
    <div class="cus-dialog__cont">
      <Table border :columns="columns" :data="tableData"></Table>
    </div>
  </div>
</template>
<script>
import { getRealtimeDataList } from '@/api'

export default {
  data() {
    return {
      timeNow: null,
      columns: [
        {
          title: '参数名',
          key: 'des',
          align: 'center'
        },
        {
          title: '实时值',
          align: 'center',
          render: (h, params) => {
            let row = { ...params.row }
            return h('span', row.value + row.unit)
          }
        },
        {
          title: '更新时间',
          align: 'center',
          render: (h, params) => {
            let row = { ...params.row }
            let vm = this
            return h(
              'span',
              vm.moment(row.createdAt).format('YYYY-MM-DD HH:mm:ss')
            )
          }
        },
        {
          title: '是否正常',
          align: 'center',
          render: (h, params) => {
            let state = { ...params.row }.state
            let domObj = {
              1: h(
                'span',
                {
                  class: ['el-tag', 'el-tag--zhengchang']
                },
                '正常'
              ),
              2: h(
                'span',
                {
                  class: ['el-tag', 'el-tag--yujing']
                },
                '预警'
              ),
              3: h(
                'span',
                {
                  class: ['el-tag', 'el-tag--gaojing']
                },
                '告警'
              ),
              4: h(
                'span',
                {
                  class: ['el-tag', 'el-tag--guzhang']
                },
                '故障'
              )
            }
            if (!(state in domObj))
              return h(
                'span',
                {
                  class: ['el-tag', 'el-tag--guzhang']
                },
                '未知'
              )

            return domObj[state]
          }
        }
      ],
      tableData: []
    }
  },
  props: {
    deviceId: String
  },
  mounted() {
    this.getInfo()
  },
  methods: {
    getInfo() {
      const vm = this
      const params = { deviceId: vm.deviceId }
      getRealtimeDataList(params).then(res => {
        if (res.code === 200) {
          vm.tableData = res.data
          vm.timeNow = vm
            .moment(res.data[0].createdAt)
            .format('YYYY-MM-DD HH:mm:ss')
        }
      })
    }
  }
}
</script>
